<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #drop,
    #dropStart {
      width: 400px;
      height: 400px;
    }
    #drop {
      background-color: aqua;
    }
    #dropStart {
      background-color: #a8a8ad;
    }
  </style>
</head>
<body>
<div id="dragstart" draggable="true">

</div>
<div id="drop">

</div>
<script>
  const $dragstart = document.querySelector('#dragstart')
  const $drop = document.querySelector('#drop')

  async function getSome () {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('xxxxxxxxxxxxxxxxxxxxxxxx')
      }, 200)
    })
  }

  function pushData (event) {
    return () => {
      event.dataTransfer.effectAllowed = 'copy';
      event.dataTransfer.dropEffect = 'copy';
      event.dataTransfer.setData('text', 'data')
    }
  }

  $dragstart.addEventListener('dragstart', async (event) => {
    const dataTransfer = event.dataTransfer
    const push = pushData(event)
    console.log('-xxxxxxxxxx  dragstart xxxxxxxxxxxx')
    const data = await getSome()
    console.log('-xxxxxxxxxx  dragstart xxxxxxxxxxxx', dataTransfer.getData('Text'))

    // dataTransfer.effectAllowed = 'copy';
    // dataTransfer.dropEffect = 'copy';
    // dataTransfer.setData('text', 'data')

    push()
  }, false)

  $drop.addEventListener('dragover', (event) => {
    event.preventDefault()
  }, false)

  $drop.addEventListener('drop', (event) => {
    console.log('-xxxxxxxxxx  drop 2 xxxxxxxxxxxx', event.dataTransfer.getData('Text'))
    event.preventDefault()
  }, false)
</script>
</body>
</html>
